<template>
  <div class="container">
    <div class="null flex_column flex_align_center">
      <img src="@/assets/images/evaluate/unscramble.png" alt="" />
      <div class="tips_box" v-if="isExplain == 1">
        <div class="text">未找到解读报告，您还未申请解读！</div>
        <button class="btn" @click="toApply">申请解读</button>
      </div>

      <div class="tips_box" v-if="isExplain == 2 || isExplain == 3">
        <div class="text">您已申请过解读了，请等待咨询师处理哦~</div>
        <button class="btn dis_btn">已提交申请</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

import { queryApplyNum, selfApplyExplain } from "@/api/evaluation/index.js";

import { applyTaskEvaluation } from "@/api/evaluation/task.js";
export default {
  computed: {
    ...mapState(["INFO"]),
  },
  props: {
    type: {
      type: Number,
      default: null, //1 是任务测评报告 2 是自我测评报告
    },
    id: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      isExplain: null,
      appltInfo: {},
    };
  },

  created() {
    this.getApplyNum();
  },
  methods: {
    async getApplyNum() {
      const res = await queryApplyNum();
      if (res.code == 200) {
        this.appltInfo = res.data;
      }
    },
    async toApply() {
      this.$popup({
        visible: false,
        title: "申请解读",
        message: `<div>申请解读可以得到咨询师对本报告的</div>
          <div>建议及意见。确定要向<span style="color:#00aeff">${this.appltInfo.user_name}</span>申请吗?</div>
            <div style="white-space: nowrap;font-size: 16px;color: #959595;">(今日剩余申请次数：${this.appltInfo.explain_num}次)</div>
          `,
        confirmOperate: async () => {
          if (this.type == 1) {
            let res = await selfApplyExplain({ id: this.id });
            if (res.code == 200) {
              this.$toast.success({ message: "申请成功，等待咨询师回复吧~" });
              this.$emit("getSelfEvaluationInfo", this.id, "haveApplied"); //'haveApplied'为已申请，更新querySelfEvaluationInfo接口数据
            }
          } else if (this.type == 2) {
            let res = await applyTaskEvaluation({ id: this.id });
            if (res.code == 200) {
              this.$toast.success({ message: "申请成功，等待咨询师回复吧~" });
              this.$emit("getTaskEvaluationReport", this.id, "haveApplied");
            }
          }
        },
      });
    },
    getInfo(val) {
      this.isExplain = val;
    },
  },
};
</script>

<style lang="less" scoped>
.tips_box {
  text-align: center;
}
img {
  width: 256.94px;
  margin-top: 55px;
  height: 138.89px;
  margin-bottom: 34px;
}
.text {
  font-size: 15.97px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  text-align: left;
  color: #888888;
  margin-bottom: 30px;
}
.btn {
  display: inline-block;
  margin: 0 auto;
  width: 125px;
  height: 41.67px;
}
.dis_btn {
  opacity: 0.5;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}
</style>
